<template>
  <div class="goods-data-info">
    <div
        class="info"
        v-for="(item, index) in goodsData"
        :key="index"
    >
      <div class="image">
        <img :src="item.goodsImage" alt="">
      </div>
      <div class="content">
        <div class="title">
          {{ item.goodsTitle }}
        </div>
        <div class="sku">
          {{ item.sku }}
        </div>
        <div class="material">
          {{ getPackageMaterialText(item.packageMaterialId) }}
        </div>
      </div>
      <div class="num">
        X {{ item.num }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goodsData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    packageMaterial() {
      return this.$store.state.user.userPackageMaterial;
    },
  },
  data() {
    return {}
  },
  created() {

  },
  methods: {
    getPackageMaterialText(id) {
      let text = this.$t('table.No packaging service');
      this.packageMaterial.forEach(item => {
        if (item.id === id) {
          text = item.name + '(' + item.price + this.$t('table.unit1') + ')'
        }
      });
      return text;
    },
  }
}
</script>

<style scoped lang="less">
.goods-data-info{
  @length: 80px;
  .info{
    height: @length;
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    .image{
      width: @length;
      height: @length;
      img{
        width: 100%;
        height: 100%;
      }
      flex: 0 0 auto;
    }
    .content{
      height: @length;
      padding-left: 15px;
      width: 60%;
      @titleHeight: (@length / 2);
      @lineHeight: (@length / 4);
      line-height: 18px;
      .title{
        height: @titleHeight;
        color: #AAAAAA;
        // 最多两行，多余的省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 18px;
      }
      .sku{
        height: @lineHeight;
        color: #555555;
        font-weight: bold;
        line-height: 18px;
        font-size: 16px;
      }
      .material{
        height: @lineHeight;
        color: #FC541E;
        font-weight: bold;
      }
    }
    .num{
      font-size: 18px;
      color: #FE6348;
      padding-left: 42px;
    }
  }
}
</style>
